<template>
	<view class="main" style="text-align: center;">
		<view class="main_son">
			<text style="font-size: 40rpx;">
				<b>请输入核销码或者扫一扫</b>
			</text>
			<view class='search acea-row' style="margin: 30rpx 0;">
				<view class='input acea-row row-middle'>
					<text class='iconfont icon-sousuo2'></text>
					<input class="placeholder" type='number' @input="setValue" :value='searchValue'
						placeholder='请输入十位核销码' placeholder-class='placeholder' confirm-type="search"
						@confirm="searchBut()" style="width: 100%;" maxlength="10"></input>
				</view>
				<view class='bnt' @tap='searchBut'>搜索</view>
			</view>
			<view class="imgBox">
				<image src="../../static/saosao.png" mode="heightFix" @tap="setCancel"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getVerification
	} from '@/api/index.js'
	export default {
		data() {
			return {
				searchValue: '',
			}
		},
		methods: {
			setCancel() {
				uni.navigateTo({
					url: '/pages/pickUp/pickUp?type=cancel'
				})
			},
			setValue(e) {
				console.log(e.detail.value);
				this.searchValue = e.detail.value
			},
			searchBut() {
				getVerification({
					verifyCode: this.searchValue
				}).then(res => {
					uni.navigateTo({
						url: '/pages/orderDetails/orderDetails?orderNo=' + res.data + '&orderType=1' +
							'&verifyCode=' + this.searchValue
					})
				}).catch(e => {
					uni.showToast({
						icon: 'error',
						title: e
					})
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.main {
		height: 100vh;
		width: 100vw;
		box-sizing: border-box;
		background: #fff;

		&_son {
			width: calc(60%);
			height: 600rpx;
			margin: 0rpx auto 0;
			padding-top: 200rpx;
		}
	}

	.main .search {
		padding: 18rpx 40rpx;
		display: flex;
	}

	.main .search .input {
		width: calc(80%);
		background-color: #f7f7f7;
		border-radius: 33rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		height: 66rpx;
	}

	.main .search .input input {
		width: 12vw;
		font-size: 28rpx;
	}

	.main .search .input .placeholder {
		color: #bbb;
	}

	.main .search .input .iconfont {
		color: #000;
		font-size: 35rpx;
	}

	.main .search .bnt {
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 28rpx;
		color: #282828;
		margin-left: 24rpx;
	}

	.search {
		/deep/.placeholder {
			width: 100%;
		}
	}
</style>
